/*
 * @Date: 2022-03-28 18:39:30
 * @LastEditors: LiuPeng
 * @LastEditTime: 2022-04-11 10:33:10
 * @FilePath: \pay\src\pages\Login\index.jsx
 */
import React, { useEffect, useRef } from 'react'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'
import { message } from 'antd';
import loginStyle from './index.module.css'

import { loginRequest } from './../../API'

export default function Login() {

  // 用户名ref
  const userName = useRef()
  // 密码ref
  const passWord = useRef()
  // 验证码展示容器ref
  const checkCodeBox = useRef()
  // 验证码输入框ref
  const checkCode = useRef()
  // 记住密码ref
  const rememberPwd = useRef()

  // 编程式路由
  const navigate = useNavigate()

  // antd 消息提示全局配置
  message.config({
    top: 400, //消息距离顶部的位置
    duration: 1, //自动关闭时间
    maxCount: 2, //最大显示数, 超过限制时，最早的消息会被自动关闭
    getContainer: () => document.getElementsByClassName(loginStyle.container)[0] //配置渲染节点的输出位置
  })


  // 创建验证码
  const createCode = () => {
    let code = "";
    let codeLength = 6; //验证码的长度
    let checkCodeBoxNode = checkCodeBox.current

    // 所有候选组成验证码的字符
    let codeChars = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
      'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
      'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
    //循环组成验证码的字符串
    for (let i = 0; i < codeLength; i++) {
      //获取随机验证码下标
      let charNum = Math.floor(Math.random() * 62);
      //组合成指定字符验证码
      code += codeChars[charNum];
    }
    if (checkCodeBoxNode) {
      //为验证码区域添加样式名
      // checkCode.className = "code";
      color(checkCodeBoxNode)
      //将生成验证码赋值到显示区
      checkCodeBoxNode.innerHTML = code;
    }
  }

  // 验证码随机颜色
  const color = (checkCodeBoxNode) => {
    let r = Math.floor(Math.random() * 255);
    let g = Math.floor(Math.random() * 255);
    let b = Math.floor(Math.random() * 255);
    let fontColor = `rgb(${r},${g},${b})`;
    checkCodeBoxNode.style.backgroundColor = '#F3FBFE';
    checkCodeBoxNode.style.color = fontColor;
  }

  // 验证码检验函数
  const verifyCode = (verificationCode) => {
    // 将输入框输入的验证码转换成全大写
    verificationCode = verificationCode.toUpperCase()
    // 将显示验证码区域的验证码转换成全大写
    let checkCodeText = checkCodeBox.current.innerText.toUpperCase()
    if (verificationCode !== checkCodeText) {
      message.error('验证码输入错误')
      checkCode.current.value = ''
      createCode()
    }
  }

  // 是否记住密码
  const isRemenberPwd = (pwd) => {
    let checkedRemenberPwd = rememberPwd.current.checked;
    if (checkedRemenberPwd) {
      localStorage.setItem('remenberPwd', pwd)
    } else {
      localStorage.removeItem('remenberPwd')
    }
  }

  // 登录按钮点击事件
  const loginSubmit = () => {
    // 用户名、密码、验证码
    let uName = userName.current.value.trim()
    let pwd = passWord.current.value.trim()
    let verificationCode = checkCode.current.value.trim()
    if (!uName) {
      message.error('请输入正确格式的用户名')
    } else if (!pwd) {
      message.error('请输入正确格式的密码')
    }
    else if (!verificationCode) {
      message.error('验证码不能为空')
    } else {
      // 调用验证码检验函数
      verifyCode(verificationCode)
      // 调用是否记住密码函数
      isRemenberPwd(pwd)
      // 调用登录接口
      loginRequest(
        {
          password: pwd,
          username: uName
        }
      ).then(res => {
        console.log(res);
        if (res.code === 200) {
          localStorage.setItem('user', JSON.stringify({ uName, pwd }))
          // 身份
          localStorage.setItem('userIdentity', res.data)
          localStorage.setItem('token', res.token)
          // 登录成功后，跳转页面
          navigate('/pages')
        } else {
          message.error('用户名或密码错误')
        }
      })

    }
  }

  // 生命周期
  useEffect(() => {
    // 页面挂载时，创建验证码并显示
    createCode()
    // 页面挂载时，是否有记住的密码
    passWord.current.value = localStorage.getItem('remenberPwd') ? localStorage.getItem('remenberPwd') : ''

  });

  return (
    <div className={loginStyle.container}>
      <div className={loginStyle.contant}>
        {/* <!-- login 图标和标题 --> */}
        <div className={loginStyle.login_logo}>
          <div className={loginStyle.img_box}>
            <img title="用有渠道云代付" src="/loginLogo.png" alt="" />
          </div>
        </div>
        {/* <!-- login 标题 --> */}
        <h2 className={loginStyle.login_title}>用有渠道云代付系统</h2>
        {/* <!-- login 表单 --> */}
        <div className={loginStyle.login_form}>
          {/* <!-- 用户名 --> */}
          <div className={loginStyle.input_box}>
            <span><UserOutlined /></span>
            <input autoComplete="off" type="text" ref={userName} placeholder="用户名" />
          </div>
          {/* <!-- 密码 --> */}
          <div className={loginStyle.input_box}>
            <span><LockOutlined /></span>
            <input autoComplete="off" type="password" ref={passWord} placeholder="密码" />
          </div>
          {/* <!-- 验证码 --> */}
          <div className={loginStyle.input_box}>
            <span><LockOutlined /></span>
            <input autoComplete="off" type="text" ref={checkCode} placeholder="验证码" />
            <span className={loginStyle.code_box} ref={checkCodeBox} onClick={createCode}>
            </span>
          </div>
          {/* <!-- 登录按钮 --> */}
          <div className={loginStyle.login_btn_box}>
            <button onClick={loginSubmit} className={loginStyle.login_btn} type="button">登录</button>
          </div>
          {/* <!-- 记住密码 --> */}
          <div className={loginStyle.remember_pwd}>
            <input type="checkbox" ref={rememberPwd} />
            <span>记住密码</span>
          </div>
        </div>
      </div>
    </div>
  )
}